import ProTable from '@ant-design/pro-table';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Image } from 'antd';
import {collageCardata, groupList} from "@/services/ant-design-pro/marketing";
import {useEffect, useState} from "react";
import { StatisticCard } from '@ant-design/pro-card';


export default () => {
  const [isModalList,setIsModalList] = useState(false)

  const columns = [
    {
      dataIndex: 'user["avatar"]',
      title: '头像',
      search: false,
      align: 'center',
      render: (_, record) =><Image width={80} src={record.user.avatar} />
    },
    {
      title: '开团团长',
      dataIndex: 'title',
      align: 'center',
      copyable: true,
      ellipsis: true,
      search: false,
      render: (_,record) => <span>{record.user.nickname}</span>
    },
    {
      title: '时间选择',
      dataIndex: 'time',
      valueType: 'radioButton',
      initialValue: '',
      hideInTable: true,
      colSize: '1.3',
      valueEnum: {
        '': '全部',
        today: '今天',
        yesterday: '昨天',
        week: '最近7天',
        thirty: '最近30天',
        month: '本月',
        year: '本年'
      }
    },
    {
      dataIndex: 'start',
      hideInTable: true,
      valueType: 'dateRange',
      initialValue: '',
      valueEnum: {
        start: '开始时间',
        stop: '结束时间'
      }
    },
    {
      title: '开团时间',
      dataIndex: 'start_time',
      align: 'center',
      search: false,
    },
    {
      title: '拼团商品',
      dataIndex: 'text',
      search: false,
      align: 'center',
      // render: (_,record) => <span>{record.storeBargain.store_name}</span>
    },
    {
      title: '几人团',
      dataIndex: 'bargain_price_min',
      search: false,
      align: 'center',
      // render: (_,record) => <span>{record.storeBargain.min_price}</span>
    },
    {
      title: '几人参加',
      dataIndex: 'bargain_price',
      search: false,
      align: 'center',

    },
    {
      title: '结束时间',
      dataIndex: 'stop_time',
      search: false,
      align: 'center',
      // render: (_,record) => <span>{record.storeBargain.stop_at}</span>
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      valueType: 'select',
      // render: (_,record) => <Tag color="red">{record.storeBargain.active_status}</Tag>
    },
    {
      title: '操作',
      valueType: 'option',
      align: 'center',
      fixed: 'right',
      width: 200,
      render: (_,record) => {
        return (
          <div>
            <a
              type="primary"
              onClick={() => {
                setIsModalList(true);
              }}
              onChange={()=>{
                console.log(record)
              }}
            >
              查看详情
            </a>
            {/* <Details */}
            {/*  visible={isModalList} */}
            {/*  onVisibleChange={()=>{setIsModalList(false)}} */}
            {/* /> */}
          </div>
        )
      },
    },
  ];

  // 指示卡
  const [cordData,setCordData] = useState([])
  const imgStyle = {
    display: 'block',
    width: 42,
    height: 42,
  };

  useEffect(async ()=>{
    const cordData = await collageCardata()
    setCordData(cordData)
  },[])

  return (
    <PageContainer
      header={{
        breadcrumb: {},
      }}
    >
      <div style={{marginBottom: '20px',display:'flex',justifyContent: 'space-between',width: '620px'}}>
        <StatisticCard
          style={{width: '300px'}}
          statistic={{
            title: '参与人数(人)',
            value: cordData.totalPeople,
            icon: (
              <img
                style={imgStyle}
                src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*dr_0RKvVzVwAAAAAAAAAAABkARQnAQ"
                alt="icon"
              />
            ),
          }}
        />
        <StatisticCard
          style={{width: '300px'}}
          statistic={{
            title: '成团数量(个)',
            value: cordData.agglomerate,
            icon: (
              <img
                style={imgStyle}
                src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*-jVKQJgA1UgAAAAAAAAAAABkARQnAQ"
                alt="icon"
              />
            ),
          }}
        />
      </div>
      <Card>
        <ProTable
          columns={columns}
          request={async (params={}) => {
            let {data,meta} =  await groupList({...params})
            return{
              data,
              success:true,
              total:meta.pagination.total
            }
          }}
          editable={{
            type: 'multiple',
          }}
          rowKey="id"
          search={{
            labelWidth: 'auto',
            defaultCollapsed: false,
            collapseRender: false,
          }}
          scroll={{ x: 1300 }}
          form={{
            // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
            syncToUrl: (values, type) => {
              if (type === 'get') {
                return {
                  ...values,
                  created_at: [values.startTime, values.endTime],
                };
              }
              return values;
            },
          }}
          pagination={{
            pageSize: 5,
          }}
          dateFormatter="string"
          toolBarRender={() => [

          ]}
        />
      </Card>
    </PageContainer>

  );
};
